<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <div class="steps">
        <a-steps :current="current" size="small">
          <a-step title="填写复制信息" />
          <a-step title="确认复制信息" />
          <a-step title="完成" />
        </a-steps>
      </div>

      <div class="formBox">
        <a-form-model
          v-show="current === 0"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 17 }"
        >
          <a-form-model-item label="请选择模版店铺" prop="from_store_id">
            <a-select v-model="form.from_store_id" allowClear :filter-option="filterOption" show-search>
              <a-select-option :value="item.id" v-for="item in storeList" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="复制到" prop="to_store_id">
            <a-select v-model="form.to_store_id" allowClear :filter-option="filterOption" show-search>
              <a-select-option :value="item.id" v-for="item in copyStoreList" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="复制类型" prop="type">
            <a-checkbox-group v-model="form.type">
              <a-checkbox value="home"> 商城首页 </a-checkbox>
              <a-checkbox value="category"> 商品分类 </a-checkbox>
              <a-checkbox value="product"> 商城商品 </a-checkbox>
              <a-checkbox value="center"> 个人中心 </a-checkbox>
              <a-checkbox value="footnav"> 底部菜单 </a-checkbox>
              <br>
              <a-checkbox value="delete_goods"> *删除之前产品* </a-checkbox>
              <a-checkbox value="delete_cat"> *删除之前分类* </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 17, offset: 5 }">
            <a-button type="primary" @click="submitForm"> 下一步 </a-button>
          </a-form-model-item>
        </a-form-model>

        <div class="submitCopy" v-show="current === 1">
          <a-alert closable message="确认复制后，数据将直接替换原商城，无法撤回。" type="info" show-icon />
          <div class="item">
            复制店铺：<span>{{ geStoreName(form.to_store_id) }}</span>
          </div>
          <div class="item">
            使用店铺：<span>{{ geStoreName(form.from_store_id) }}</span>
          </div>

          <div class="btn">
            <a-button type="primary" @click="subAxios"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="current = 0"> 上一步 </a-button>
          </div>
        </div>

        <div class="submitCopy" v-show="current === 2">
          <a-result status="success" title="操作成功" sub-title="已成功复制店铺数据">
            <template #extra>
              <div class="txt">
                <p>
                  复制店铺：<span>{{ geStoreName(form.to_store_id) }}</span>
                </p>
                <p>
                  使用店铺：<span>{{ geStoreName(form.from_store_id) }}</span>
                </p>
              </div>

              <div class="btn">
                <a-button type="primary" @click="clearData"> 重新复制 </a-button>
                <a-button
                  style="margin-left: 10px"
                  @click="
                    $router.push({
                      name: 'saasStoreCopyRecord',
                    })
                  "
                >
                  查看记录
                </a-button>
              </div>
            </template>
          </a-result>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { storeCopy } from '@/api/saas/copy'
import { wechatMpCardList } from '@/api/wechartVipCard'

export default {
  data() {
    return {
      form: {
        from_store_id: '',
        to_store_id: '',
        type: ['home', 'category', 'product', 'center', 'footnav'],
      },
      rules: {
        from_store_id: [{ required: true, message: '请选择', trigger: 'change' }],
        to_store_id: [{ required: true, message: '请选择', trigger: 'change' }],
        type: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      modalLoading: false,
      current: 0,
      storeList: [],
    }
  },

  computed: {
    copyStoreList() {
      let { storeList, form } = this
      if (!form.from_store_id) {
        return storeList
      }

      if (form.from_store_id === form.to_store_id) {
        this.form.to_store_id = ''
      }
      return storeList.filter((el) => el.id !== form.from_store_id)
    },

    geStoreName() {
      return (id) => {
        let { storeList } = this,
          item = storeList.find((el) => el.id === id)

        return item ? item.name : ''
      }
    },
  },

  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    async subAxios() {
      const hide = this.$message.loading('请求中', 0)
      let form = JSON.parse(JSON.stringify(this.form))
      if (form.type.length === 4) {
        form.type = ['all']
      }
      const res = await storeCopy(form)
      hide()
      if (res.code == 0) {
        this.current = 2
        return
      }
      this.$message.error(res.msg)
    },

    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.current += 1
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    clearData() {
      this.current = 0
      this.$ref.ruleForm.resetFields()
    },
  },

  async mounted() {
    const res = await wechatMpCardList()
    if (res.code == 0) {
      this.storeList = res.store_list || []
    }
  },
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}

.steps {
  padding: 0 191px 20px;
}

.formBox {
  margin: 20px auto 0;
  width: 757px;
}

.submitCopy {
  .item {
    padding-top: 24px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);

    span {
      color: rgba(0, 0, 0, 0.65);
    }

    &:last-of-type {
      border-bottom: 1px solid #e9e9e9;
      padding-bottom: 24px;
    }
  }

  .txt {
    padding: 24px 86px;
    color: #000;
    font-size: 14px;
    background: rgba(245, 245, 245, 0.5);
    text-align: left;

    p {
      margin: 0;
      padding: 0 0 24px 0;

      &:last-of-type {
        padding: 0;
      }
    }
  }

  .btn {
    padding-top: 24px;
    text-align: center;
  }
}
</style>
